{layout name="layout" /}
<div class="page"><div id="TplList"></div></div>
<style type="text/css">
.card{display: none}
.card-content-inner{font-size: .85rem;}
.item-inner{overflow: visible;text-overflow: clip;white-space: normal;font-weight:400;font-size:.75rem;}
.list-block{box-shadow: 0 .05rem .1rem rgba(0,0,0,.3);}
.bar-footer{line-height: 2rem;text-align: center;}
.red{color: #FF0000}
.list-block {margin: 0rem;font-size: .85rem;}
.content-block {margin: 0.75rem 0;}
.page_msg{padding:75px 15px 0;text-align:center}
.page_msg h2,.h2{font-size:18px;font-weight:400;font-style:normal}
.icon_area{margin-bottom:19px}
.text_area{margin-bottom:25px}
.text_area .title{margin-bottom:12px}
.icon_msg{width:100px;height:100px;vertical-align:middle;display:inline-block;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}
.icon_msg.warn{background-color:#f86161;color:#fff;font-size:60px;font-style:normal}
.icon_msg.info{background-color:#4caf50;color:#fff;font-size:60px;font-style:normal}
</style>
<script id="Tpl" type="text/html">
<div class="bar bar-footer">
<span id="1" class="times" minute="{$info['lock_time']}">
    <span class="time red" id="hour_show">0 时</span>
    <span class="time red" id="minute_show">0 分</span>
    <span class="time red" id="second_show">0 秒</span> 
</span>
</div>
<div class="content">
<form id="ajaxForm"> 
<input type="hidden" name="school_id" value="{$info['id']}"/>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<div class="card" id="item_{{ i+1 }}">
    <div class="card-header">第{{ i+1 }}题 :{{d.list[i].type_name}}</div>
    <div class="card-content"><div class="card-content-inner">{{d.list[i].content}}</div></div>
    <div class="list-block media-list">
    <ul>
{{# for(var j = 0, jlen = d.list[i].option_list.length; j < jlen; j++){ }}
    <li>
      <label class="label-checkbox item-content">
{{#  if(d.list[i].type == 2){ }}
        <input type="checkbox" name="answer[{{d.list[i].id}}][]" value="{{ d.list[i].option_list[j].value}}">
{{# }else{ }}
        <input type="radio" name="answer[{{d.list[i].id}}]" value="{{ d.list[i].option_list[j].value}}">
{{# } }}
        <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
        <div class="item-inner">{{ d.list[i].option_list[j].value}},{{ d.list[i].option_list[j].name}}</div>
      </label>
    </li>
{{# } }}
    </ul>
    </div>
</div>
{{# } }}
<div class="content-block">
    <div class="row">
        <div class="col-50"><a id="up" href="javascript:;" class="button  button-big button-danger disabled">上一题</a></div>
        <div class="col-50"><a id="down" href="javascript:;" class="button  button-big button-success ">下一题</a></div>
    </div>
</div>
<div class="content-block">
   <input type="submit" class="button button-big button-fill button-success" value="交 卷" /> 
</div>
</form>
</div>
</script>
<script id="Error" type="text/html">
<div class="page_msg">
    <div class="icon_area"><i class="icon_msg warn">!</i></div>
    <div class="text_area"><h2 class="title">{{d.message}}</h2></div>
</div>
</script>
<script id="Success" type="text/html">
<div class="page_msg">
    <div class="icon_area"><i class="icon_msg info">√</i></div>
    <div class="text_area"><h2 class="title">{{d.message}}</h2></div>
</div>
</script>
<script type="text/javascript">
LazyLoad.css('/webview/css/app.css');
LazyLoad.js(['/webview/jquery.2.1.4.js','/webview/light/js/light7.js','/webview/lib/laytpl.js','/webview/lib/jquery.form.js'],function (){
    $.init();
    $.get("{:url('webapp/Account/isAppLogin')}",function(data){
        if(data.code == 1){islogin(data.message)}
    });
    $.getJSON("{:url('webapp/plusexam/start_api')}",{id:{$info['id']}},function(data) {
        if(data.code == 0){
            var data = {"list":data.data};
            var gettpl = $("#Tpl").html();
            laytpl(gettpl).render(data,function(html){$("#TplList").html(html);});
            $('.card').first().show();
            var item_id = 1;
            var item_count = $('.card').length;
            $("#down").click(function() {
                $("#up").removeClass("disabled");
                var item_id_up = item_id;
                if (item_id == item_count) {
                    $.alert('后面没有了')
                    return false;
                }
                $("#item_" + item_id).hide();
                var item_id_down = parseInt(item_id_up) + 1;
                    item_id   = item_id_down;
                $("#item_" + item_id_down).show() 
                if (item_id_down == item_count) {
                    $(this).addClass("disabled");
                    return false;
                }
            });
            $("#up").click(function() {
                $("#down").removeClass("disabled");
                var item_id_down = item_id;
                if (item_id == 1) {
                    $.alert('前面没有了');
                    return false;
                }
                $("#item_" + item_id).hide();
                var item_id_up = parseInt(item_id_down) - 1;
                    item_id   = item_id_up;
                $("#item_" + item_id_up).show() 
                if (item_id_up == 1) {
                    $(this).addClass("disabled");
                    return false;
                }
            });
            //倒计时
            $(".times").each(function() {
                var minute = $(this).attr("minute");
                timer(minute)
            });
            //表单提交
            $('#ajaxForm').ajaxForm({
                url:"{:url('webapp/plusexam/submit')}",
                type:"post",
                dataType:"json",
                data:$(this).serialize(),   
                success:function(data){
                    if(data.code == 1){
                        var data = data;
                        var gettpl = $("#Error").html();
                        laytpl(gettpl).render(data,function(html){$("#TplList").html(html);}); 
                        $.alert(data.message);
                    }else if(data.code == 403){
                        islogin(data.message)
                    }else{
                        var data = data;
                        var gettpl = $("#Success").html();
                        laytpl(gettpl).render(data,function(html){$("#TplList").html(html);}); 
                        $.alert(data.message);
                    }
                    return false;
                }
            });
        }else{
            var data = data;
            var gettpl = $("#Error").html();
            laytpl(gettpl).render(data,function(html){$("#TplList").html(html);});
            $.alert(data.message,function(){javascript:history.go(-1);});
        }
    });
})
function islogin(message){
    $.alert(message, function () {window.location.href="{:url('webapp/Account/index')}";});
}
function timer(minute) {
    window.setInterval(function(){
        var d = 0,c = 0,f = 0,e = 0;
        if (minute > 0) {
            d = Math.floor(minute / (60 * 60 * 24));
            c = Math.floor(minute / (60 * 60)) - (d * 24);
            f = Math.floor(minute / 60) - (d * 24 * 60) - (c * 60);
            e = Math.floor(minute) - (d * 24 * 60 * 60) - (c * 60 * 60) - (f * 60);
        }else{
            $.alert('答题超时了');
        }
        if (f <= 9) f = "0" + f
        if (e <= 9) e = "0" + e
        $("#hour_show").html(c + "时");
        $("#minute_show").html(f + "分");
        $("#second_show").html(e + "秒");
        minute--
    },1000)
};
</script>